

/**
 * swiper默认配置项
 */ 
 const defaultOptions = {
  "easing-function": "default", // 指定 swiper 切换缓动动画类型
  duration: 500, // 滑动动画时长
  loop: true, // 是否循环播放
};

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 用于渲染的swiper数据
    list: {
      type: Array,
      value: [], 
      observer(newVal, oldVal) {
        this.updateList(newVal);
      },
    }, 
    // 当视频大小与 video 容器大小不一致时，视频的表现形式
    objectFit: {
      type: String,
      value: 'contain' // contain: 包含，fill: 填充，cover: 覆盖
    },
    // 动态设置swiper的宽度
    width: {
      type: String,
      value: '750rpx',
    }, 
    // 动态设置swiper的高度
    height: {
      type: String,
      value: '100%',
    }, 
    // 自定义占位样式
    customStyle: {
      type: String,
      value: '',
    },
    // swiper配置项
    options: {
      type: Object,
      value: {},
      observer(newVal, oldVal) {
        this.observerOptions(newVal, oldVal);
      },
    },
  },
  data: {
    videoList: [],
    swiperOptions: defaultOptions, // swiper配置项
  },
  /**
   * 组件生命周期
   */
  lifetimes: {
    attached(){
      this.updateList(this.data.list);
    }
  },
  methods: {
    /**
     * 更新列表数据
     * @param {*} list 
     */
    updateList(list) {
      if (!list || !list.length ) return;
      const videoList = list.map((url, index) => ({ id: index + 1, url , objectFit: this.data.objectFit}))
      this.setData({
        videoList
      });
    },
    /**
     * 监听 options 变化
     * @param {*} newVal
     * @param {*} oldVal
     */
     observerOptions(newVal, oldVal) {
      if (
        !Object.keys(newVal).length ||
        JSON.stringify(newVal) === JSON.stringify(oldVal)
      ) {
        return; // 若当前数据不存在或没有变化，则不再继续执行
      }

      const swiperOptions = Object.assign({}, defaultOptions, newVal);

      console.log("swiperOptions>> ", swiperOptions);

      this.setData({
        swiperOptions,
      });
    },

    /**
     * 开始/继续播放时触发, e.detail={activeId}
     * @param {*} e 
     */
    onPlay(e) {
      this.triggerEvent("onPlay", e);
    },

    /**
     * 暂停播放时触发, e.detail={activeId}
     * @param {*} e 
     */
    onPause(e) {
      this.triggerEvent("onPause", e);
    },

    /**
     * 播放到末尾时触发, e.detail={activeId}
     * @param {*} e 
     */
    onEnded(e) {
      this.triggerEvent("onEnded", e);
    },

    /**
     * 滑动切换完成时触发, e.detail={activeId}
     * @param {*} e 
     */
    onChange(e) {
      this.triggerEvent("onChange", e);
    },

    /**
     * 视频播放出错时触发, e.detail={activeId}
     * @param {*} e 
     */
    onError(e) {
      this.triggerEvent("onError", e);
    },

    /**
     * 视频出现缓冲时触发, e.detail={activeId}
     * @param {*} e 
     */
    onWaiting(e) {
      this.triggerEvent("onWaiting", e);
    },

    /**
     * 播放进度变化时触发，event.detail = {currentTime, duration, activeId}
     * @param {*} e 
     */
    onTimeUpdate(e) {
      this.triggerEvent("onTimeUpdate", e);
    },

    /**
     * 加载进度变化时触发，只支持一段加载。event.detail={buffered, activeId}
     * @param {*} e 
     */
    onProgress(e) {
      this.triggerEvent("onProgress", e);
    },

    /**
     * 视频元数据加载完成时触发。event.detail={width, height, duration, activeId}
     * @param {*} e 
     */
    onLoadedMetaData(e) {
      this.triggerEvent("onLoadedMetaData", e);
    }
  }
})
